@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-tag';
@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';

$sizes: 'xs', 's';
$label-typography: (
  'xs': $sans-label-s,
  's': $sans-label-m
);

.button {
  cursor: pointer;

  display: inline-flex;
  align-items: center;

  box-sizing: border-box;

  color: $sys-neutral-text-support;
  white-space: nowrap;

  background: none;
  border-color: $sys-neutral-decor-disabled;
  border-style: solid;

  &:focus-visible {
    @include outline-var($container-focused-s);

    outline-color: $sys-available-complementary;
  }

  @each $size in $sizes {
    @include composite-var($label-typography, $size);

    &[data-size=#{$size}] {
      @include composite-var($tag-more, 'container', $size, 'label-only');
    }
  }
}

.tagRowDroplistContainer {
  @each $size in $sizes {
    &[data-size=#{$size}] {
      @include composite-var($tag-list, $size);
    }
  }
}

.tagRowDroplistScroll {
  max-height: 200px;
}

.triggerClassName {
  --offset: #{$space-drop-list-drop-offset}; 
}